<template>
  <div style="padding: 10px" :class="activeKey == 3 ? 'look-box' : ''">
    <a-tabs
        style="background: #ffff; height: 100%"
        v-model:activeKey="activeKey"
    >
      <template #rightExtra>
        <a-button type="primary" ghost v-if="isAdmin && activeKey == 4"
                  @click.stop="handleEditSeaRule">公海规则
        </a-button>
      </template>
      <a-tab-pane key="1" tab="我的客户">
        <IntendedCustomerList
            sourceType="mine"
            :villageOptions="villageList"
            :customerChannelOptions="customerChannelOptions"
            :isAdmin="isAdmin"
            :activeKey="activeKey"
        />
      </a-tab-pane>
      <a-tab-pane key="2" tab="全部客户" v-if="isAdmin">
        <IntendedCustomerList
            sourceType="all"
            :isAdmin="isAdmin"
            :canRecycle="canRecycle"
            :villageOptions="villageList"
            :customerChannelOptions="customerChannelOptions"
            :activeKey="activeKey"
        />
      </a-tab-pane>
      <a-tab-pane key="3" tab="客户看板">
        <IntendedCustomerView
            :isAdmin="isAdmin"
            :canRecycle="canRecycle"
            :villageOptions="villageList"
            :customerChannelOptions="customerChannelOptions"
            :activeKey="activeKey"
        />
      </a-tab-pane>
      <a-tab-pane key="4" tab="客户公海">
        <IntendedCustomerList
            sourceType="openSea"
            :villageOptions="villageList"
            :customerChannelOptions="customerChannelOptions"
            :activeKey="activeKey"
            :isAdmin="isAdmin"
        />
      </a-tab-pane>
      <a-tab-pane key="5" tab="审核中" v-if="isOpenApproval">
        <IntendedCustomerList
            sourceType="approvalIng"
            :villageOptions="villageList"
            :customerChannelOptions="customerChannelOptions"
            :activeKey="activeKey"
            :isAdmin="isAdmin"
        />
      </a-tab-pane>
      <a-tab-pane key="6" tab="客户状态" v-if="isAdmin">
        <IntendedCustomerStatus
            :activeKey="activeKey"
        />
      </a-tab-pane>
    </a-tabs>

    <CustomerSeaRule
        :visible="showAddRule"
        :isCustomer="true"
        @handleClose="() => (showAddRule = false)"
        @commit="handleRuleSuccess"
    />
  </div>
</template>
<script>
import {
  defineComponent,
  ref,
  createVNode,
  reactive,
  computed,
  watch,
  toRefs,
  onActivated,
} from "vue";
import request from "../../../common/utils/request";
import IntendedCustomerList from "@/views/village/BusinessManage/modules/IntendedCustomerList.vue";
import IntendedCustomerView from "@/views/village/BusinessManage/modules/IntendedCustomerView.vue";
import IntendedCustomerStatus
  from "@/views/village/BusinessManage/modules/IntendedCustomerStatus.vue";
import CustomerSeaRule from "@/views/village/BusinessManage/modules/CustomerSeaRule.vue";
import store from "@/store";

export default defineComponent({
  name: "customerManagement",
  components: {
    IntendedCustomerList,
    IntendedCustomerView,
    IntendedCustomerStatus,
    CustomerSeaRule,
  },
  setup() {

    const state = reactive({
      activeKey: '0',
      villageList: [],
      isAdmin: false,
      customerChannelOptions: [],
      canRecycle: false, // 是否可回收
      showAddRule: false,
    });

    const getVillageList = () => {
      request
          .get("/org", "/build/villageAndBuildList/v2", {
            checked: 1,
          })
          .then((res) => {
            let vList = [];
            res.villageList.forEach((item) => {
              vList.push({
                label: item.name,
                value: item.id,
              });
            });
            state.villageList = vList;
          });
    };

    const handleEditSeaRule = () => {
      state.showAddRule = true;
    };


    const getChannelList = () => {
      request
          .get("/org", "/business/customer/channel/index", {})
          .then((res) => {
            state.customerChannelOptions = res.list.map((item) => {
              return {
                value: item.id,
                label: item.name,
              };
            });
          });
    };

    const getRole = () => {
      request
          .get("/org", "/business/customerTeam/UserRoleInfo", {})
          .then((res) => {
            let level = store.getters.userInfo.level;
            if (res.role == 1 || level == 99) {
              state.isAdmin = true;
            } else {
              state.isAdmin = false;
            }
          });
    };


    const getPoolRules = () => {
      request.get("/org", "/business/customer/customerPoolConfigGet", {}).then((res) => {
        state.canRecycle = res?.detail?.recovery_type == 2
      });
    };

    const handleRuleSuccess = () => {
      state.showAddRule = false;
      getPoolRules();
    };
    const isOpenApproval = ref(false);
    const init = () => {
      if (state.activeKey !== '0') {
        let oldKey = state.activeKey;
        state.activeKey = '0';
        setTimeout(() => {
          state.activeKey = oldKey;
        }, 0)
      } else {
        state.activeKey = '1';
      }
      // 角色
      getRole();
      // 项目
      getVillageList();
      // 客户渠道
      getChannelList();
      // 公海规则
      getPoolRules();

      store.dispatch("GET_BUSINESS_CONFIG");
      setTimeout(() => {
        isOpenApproval.value = store.getters.customConfig;
      }, 500)
    };

    onActivated(() => {
      init();
    });

    return {
      ...toRefs(state),
      handleEditSeaRule,
      handleRuleSuccess,
      isOpenApproval
    };
  },
});
</script>

<style lang="less" scoped>
.acol {
  height: 53px;
  border-left: 3px solid rgba(0, 0, 0, 0.06);
  // margin-top: 10px;
  // margin-right: 30px;
}

.look-box {
  height: 100%;
}

:deep(.ant-tabs-content) {
  height: 100%;
}

:deep(.ant-tabs-nav) {
  padding: 0 10px;
}
</style>
